国产精品日韩欧美一区二区-狠狠躁夜夜躁人人爽天天天天97-一级一片免费观看-偷拍亚洲综合20p-日韩视频在线播放-久久久女人与动物群交毛片-亚洲熟妇av综合网-91视频久久久-欧美亚洲在线视频-国产乱淫av片杨贵妃-二区国产-日韩久久不卡-91av色-美女扒开腿让男人桶爽久久软件-毛片在线视频播放-97se狠狠狠狼鲁亚洲综合网-国产女高清在线看免费观看-国产绿帽口舌视频vk-精品一区久久久-av黄色在线

聯(lián)
咨詢熱線:

17661095540

聯(lián)系QQ:

2863379292

官方微信:

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了

微信營銷

導(dǎo)讀:發(fā)布會謝幕了,媒體們也發(fā)完了新聞稿,朋友圈也熱鬧過了,接下來的工作該輪到設(shè)計師了。iphone X 11月才發(fā)貨,但你也許已經(jīng)接到設(shè)計任務(wù)了。在這之前,讓我們先來看看這個iphoneX,對UI

發(fā)表日期:2019-03-21

文章編輯:興田科技

瀏覽次數(shù):10507

標(biāo)簽:

發(fā)布會謝幕了,媒體們也發(fā)完了新聞稿,朋友圈也熱鬧過了,接下來的工作該輪到設(shè)計師了。iphone X 11月才發(fā)貨,但你也許已經(jīng)接到設(shè)計任務(wù)了。在這之前,讓我們先來看看這個iphoneX,對UI設(shè)計師的日常工作有什么影響。

新增的虛擬 Home 指示條——你不得不考慮的設(shè)計元素之一

iphone X 邁向了全面屏,移除了原本在手機(jī)底部的實(shí)體Home鍵,取而代之的是一條 134x 5pt 的虛擬Home指示條。

「底端上劃」成為了全局性的系統(tǒng)操作,它可以讓你返回桌面(原本的單擊Home鍵),或者切換應(yīng)用程序(原本雙擊Home 鍵)。我將這個虛擬Home指示條的特性總結(jié)為以下五點(diǎn):

特性一:如影隨形

蘋果在新的開發(fā)文檔中指出,這個 Home 指示條是「至關(guān)重要的系統(tǒng)元素」,除了在某種特殊條件下,這個指示條將永遠(yuǎn)伴隨著你的 App,成為強(qiáng)制的設(shè)計元素出現(xiàn)在屏幕中。這就意味著,在你的 App 設(shè)計中你將不得不為它保留位置,并考慮好周圍元素與它的兼容關(guān)系。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

特性二:黑白條

這個虛擬 Home 指示條只有亮/暗兩種模式,它會自動根據(jù)周圍背景,選擇將自己變身成白色或是黑色,從而盡可能地和周圍背景有所區(qū)分。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

特性三:全面屏

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

iOS 自帶的通訊錄是一個典型的帶有底部導(dǎo)航欄的 App,對比 iphone 8 和 iphone X,你會發(fā)現(xiàn)在 iphone X 上,底部導(dǎo)航欄并不在真正的「底部」,它是懸浮在虛擬 Home 條上方的。對擁有底部導(dǎo)航欄的 App 而言,iphone X 這個全面屏的「下巴」并非可用區(qū)域,它并不真的「全面」。

但同時,Apple 的設(shè)計則例中也指出,如果 App 的底部是可滾動的內(nèi)容(比如一個長列表視圖),那么官方給出的建議是:放心大膽地霸占整個屏幕吧!發(fā)現(xiàn)文字和 Home 指示條重疊了?沒關(guān)系!這是官方推薦的正確做法!事實(shí)上,用戶依然可以點(diǎn)選下方的列表?xiàng)l目。這種情況下,全面屏才是真的「全面」了。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

特性四:底部上劃

美國著名的股票交易軟件 Robinhood 就使用了類似的交互。在買入/賣出股票這樣的關(guān)鍵操作里,它使用了「底部上劃」。盡管不是嚴(yán)格意義上的「底端上劃」,但虛擬 Home 指示條的介入無疑增加了誤操的機(jī)率。在 iphone X 設(shè)計時,類似這樣涉及到屏幕底部上下滑動的交互都需要更謹(jǐn)慎的思考、更嚴(yán)格的測試。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

當(dāng)然,iphone X 并沒有強(qiáng)制禁止這種交互操作。它給開發(fā)者們留了一條路:「在萬不得已必須要這樣做的情況下」,開發(fā)者可以開啟「邊緣保護(hù)」功能(Edge protection)。開啟后,次底端上劃將只是喚醒 Home 指示條,再次上劃才會激活原有功能。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

特性五:自動隱身

在播放視頻時,開發(fā)者可以開啟虛擬 Home 條「自動隱藏」功能從而獲得沉浸式體驗(yàn)。開啟后,視頻播放時虛擬 Home 條將自動消失;單擊屏幕后就又會出現(xiàn)。

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

「安全區(qū)」——這詞兒怎么聽起來有點(diǎn)耳熟?

看著新的 iOS 設(shè)計規(guī)范文檔,一個陌生又熟悉的詞浮現(xiàn)在我的腦海中——出血(Bleed)!!!

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

在平面印刷設(shè)計中,為了顧及之后紙張裁切過程中可能出現(xiàn)的誤差,設(shè)計師會在畫布四周留出的一點(diǎn)邊緣空間,這一圈額外的空間就叫做「出血」。同時,設(shè)計師一般也會設(shè)置一個「安全區(qū)」,確保設(shè)計稿中的重要內(nèi)容都出現(xiàn)在安全區(qū)內(nèi)。

對數(shù)字化時代下的 UI 設(shè)計師來說,我們本可以永遠(yuǎn)把「出血」和「安全區(qū)」的概念永遠(yuǎn)拋之腦后,因?yàn)槠聊徊挥貌们校∪澜缫苍S 99.99% 的手機(jī)屏都是規(guī)整的矩形,我們的安全區(qū)就是整塊矩形屏(安卓系統(tǒng)底部的虛擬按鍵可以近似理解為屏幕外,設(shè)計時可以忽略)。然而 iphone X 這個妖蛾子的出現(xiàn),又迫使我們重新找回那個久遠(yuǎn)的記憶……

讓我們來看看蘋果定義的 iphone X 設(shè)計「安全區(qū)」吧:

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

手機(jī)縱向持握狀態(tài)下,安全區(qū)是從屏幕頂端往下 40 pt 開始計算的,要注意的是,它并不是和「齊劉海」完全齊平的,而是要再往下一點(diǎn)。「下巴」位置上,從下往上推 34 pt 以上的部分開始才被視為安全區(qū)。

縱向持握狀態(tài)下的安全區(qū)設(shè)計還比較容易理解,但到了橫向持握狀態(tài),安全區(qū)的概念就有點(diǎn)反直覺了:

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

橫向狀態(tài)下(假設(shè)是逆時針旋轉(zhuǎn) 90 度),原本的「劉海」部分到了左側(cè),「出血」部分實(shí)際占用面積不變,而盡管虛擬 Home 條挪到了下方的長邊上,屏幕右邊雖然沒有任何系統(tǒng)及元素,但蘋果依然建議將其設(shè)置為與左側(cè)「劉海」相對稱的「出血」。也就是說,在橫向狀態(tài)下,你的安全區(qū)是個半島,只有上方是連接到屏幕邊緣的。這又是為什么呢?為什么蘋果官方不建議設(shè)計師充分利用右邊的空白面積呢?為什么非要左右對稱地設(shè)置「出血」呢?尤其考慮到對于很多手機(jī)游戲來說,任何一點(diǎn)屏幕空間都是寶貴的,血條,金錢,操作鍵,小地圖,大地圖等等,太多元素逼著設(shè)計師充分利用每一寸空間了。

蘋果官方給出的解釋是,由于你無法預(yù)測用戶在橫向持握下會把「劉海」放在左邊還是右邊,如果安全區(qū)不是橫向居中放置的,會造成界面中元素與手機(jī)邊緣的相對位置不固定。他們認(rèn)為,用戶在使用手機(jī)時(尤其是玩游戲的時候)高度依賴手部的肌肉記憶,不對稱設(shè)計盡管空間利用率更高,但與用戶的肌肉記憶相背,由此導(dǎo)致的失敗操作容易讓用戶沮喪。因此,蘋果向廣大設(shè)計師們高聲疾呼:請把按鍵全都放到安全區(qū)里來吧!

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

尺寸大了,比例變了,這意味著……

對網(wǎng)頁設(shè)計師來說,iPhone X 意味著什么?可憐的設(shè)計師又要焦慮了 咋建網(wǎng)站

在 iphone X 之前,盡管 iphone SE,7 和 7 plus 的屏幕尺寸大小不同,但都是 16:9 的屏幕。而 iphone X 差不多是個 13:6 的屏幕(812 x 375 pt)。屏幕的絕對尺寸也變大了,從 4.7 寸增大到 5.8 寸——這些對設(shè)計來說意味著什么呢?

相關(guān)推薦

更多新聞

  • 8-28

    2023

    微信營銷 / 2023-08-28

    哈爾濱網(wǎng)站優(yōu)化- 提升網(wǎng)站在搜索引擎中的排名

    哈爾濱網(wǎng)站優(yōu)化是指通過一系列技術(shù)和策略,以提升網(wǎng)站的質(zhì)量和相關(guān)性,從而使得網(wǎng)站在搜索引擎結(jié)果頁面中獲得更高的排名。網(wǎng)站優(yōu)化可以包括優(yōu)化網(wǎng)站的內(nèi)容、結(jié)構(gòu)、代碼和外部鏈接等多個方面。通過采用哈爾濱網(wǎng)站優(yōu)化的方法,企業(yè)可以提高網(wǎng)站的可訪問性和提升用戶體驗(yàn),同時增加網(wǎng)站的流量和曝光度。

    View details

  • 8-25

    2023

    微信營銷 / 2023-08-25

    克孜勒蘇網(wǎng)站開發(fā)- 完美展現(xiàn)您的在線品牌形象的方式

    隨著越來越多的人使用移動設(shè)備瀏覽互聯(lián)網(wǎng),克孜勒蘇網(wǎng)站開發(fā)必須采用響應(yīng)式設(shè)計。這意味著您的網(wǎng)站會根據(jù)訪問設(shè)備的屏幕大小和分辨率自動調(diào)整布局和元素。這樣可以確保您的網(wǎng)站在不同設(shè)備上都能提供良好的用戶體驗(yàn),并避免讓訪客感到困惑或挫敗。

    View details

  • 8-24

    2023

    微信營銷 / 2023-08-24

    云南網(wǎng)站開發(fā):為您的業(yè)務(wù)搭建優(yōu)秀網(wǎng)站的首選

    在網(wǎng)站上線之前,云南網(wǎng)站開發(fā)公司將對網(wǎng)站進(jìn)行全面測試,以確保它的功能和性能符合預(yù)期。他們將修復(fù)任何問題并進(jìn)行必要的優(yōu)化,以確保網(wǎng)站在正式上線前具備良好的性能。

    View details

  • 8-24

    2023

    微信營銷 / 2023-08-24

    伊犁網(wǎng)站優(yōu)化:為您的網(wǎng)站提升排名和流量

    為您的網(wǎng)站創(chuàng)建有價值的、獨(dú)特的和高質(zhì)量的內(nèi)容。通過為訪問者提供有用的信息,您可以提高他們在您網(wǎng)站上停留的時間,并增加頁面瀏覽量。此外,分享有價值的內(nèi)容還可以增加其他網(wǎng)站的鏈接,從而提高您的頁面在搜索引擎結(jié)果中的排名。

    View details